<template>
  <div class="container">


    <!-- 创建编辑 -->
    <el-dialog class="add-dialog" v-model="data.dialogVisible" width="80%" margin-top="1px" :show-close="false"
      :close-on-click-modal="false">
      <div class="mb10 flex flex-between align-center mb40 head-box">
        <div class="head">
          <div class="conUnitName">
            <popup-tree-input :data="options" placeholder="请选择单位" :props="data.popupTreeProps" :prop="deptForm.parentName == null
              ? $t('message.org.top_menu')
              : ruleForm.affiliatedInstitutionName
              " :node-key="'' + deptForm.parentId" :current-change-handle="changeSelectValue" />
          </div>
          <el-select v-model="ruleForm.budgetYear" placeholder="请选择">
            <el-option label="2025" value="2025" />
            <el-option label="2024" value="2024" />
            <el-option label="2023" value="2023" />
            <el-option label="2022" value="2022" />
            <el-option label="2021" value="2021" />
            <el-option label="2020" value="2020" />
          </el-select>
        </div>
        <div class="">
          <el-button type="" @click="data.dialogVisible = false">返回列表</el-button>
          <!-- <el-button type="primary" class="mr10 ml10">暂存</el-button> -->
          <el-button type="primary" @click="submit">保存</el-button>
        </div>
      </div>

      <div class="tc rel mb10">
        <div class="f32 c-f33 fw700">{{ ruleForm.budgetYear }}信息化专项预算明细</div>
        <div class="f24 c-f33 fw700 second-title">
          单位：{{ allUnitPrice(openTableData.arr) }}万元
        </div>
      </div>
      <el-table v-if="data.dialogVisible" :data="openTableData.arr" style="width: 100%" border :cell-class-name="setClass"
        default-expand-all row-key="baseId">
        <el-table-column prop="accountNumber" label="科目编号">
          <template #default="{ row }">
            <div class="tc" style="width: 80%; display: inline-block">
              {{ row.accountNumber }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="accountType" label="科目名称">
          <template #default="{ row }">
            <el-input v-model="row.accountType" v-if="row.isChild" placeholder="请输入" />
            <span v-else>{{ row.accountType }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="accountUnit" label="单位">
          <template #default="{ row }">
            <el-select v-if="row.isChild" v-model="row.accountUnit" placeholder="请选择">
              <el-option label="项" value="项" />
              <el-option label="套" value="套" />
              <el-option label="个" value="个" />
              <el-option label="年" value="年" />
            </el-select>
            <span v-else></span>
          </template>
        </el-table-column>
        <el-table-column prop="number" label="数量">
          <template #default="{ row }">
            <el-input v-model.number="row.number" v-if="row.isChild" placeholder="请输入" type="number" />
          </template>
        </el-table-column>
        <el-table-column prop="unitPrice" label="单价（万元）">
          <template #default="{ row }">
            <el-input v-model.number="row.unitPrice" v-if="row.isChild" placeholder="请输入" type="number" />
          </template>
        </el-table-column>
        <el-table-column prop="monthPrice" label="合价（万元）">
          <template #default="{ row }">
            <div class="tc" v-if="row.isChild">
              {{ allPrice(row) }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注">
          <template #default="{ row }">
            <el-input v-model.number="row.remark" v-if="row.isChild" placeholder="请输入" />
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button v-if="!scope.row.isChild" size="small" class="ordinary" @click="addChildItem(scope.row)">添加子项
            </el-button>
            <el-button v-if="scope.row.isChild" :disabled="!canDelete(scope.row)" size="small" type="danger"
              @click="cancelItem(scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <!-- 审核 -->
    <!-- <el-dialog v-model="monthVisible.isShow" width="100vw" :show-close="false" :close-on-click-modal="false"> -->
    <el-tabs v-model="data.tabId" class="demo-tabs">
      <el-tab-pane label="流程图" name="1">
        <flowChart :processInstanceId="params.procInsId"></flowChart>
      </el-tab-pane>
      <el-tab-pane label="基本信息" name="2">
        <div class="tc rel mb10">
          <div class="f32 c-f33 fw700">{{ ruleForm.budgetYear }}信息化专项预算明细</div>
          <div class="f24 c-f33 fw700 second-title">
            单位：{{ allUnitPrice(openTableData.arr) }}元
          </div>
        </div>
        <el-table v-if="monthVisible.isShow" :data="openTableData.arr" style="width: 100%" border
          :cell-class-name="setClass" default-expand-all row-key="baseId" class="shh-box">
          <el-table-column prop="accountNumber" label="科目编号">
            <template #default="{ row }">
              <div class="tc" style="width: 80%; display: inline-block">
                {{ row.accountNumber }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="accountType" label="科目名称"></el-table-column>
          <el-table-column prop="accountUnit" label="单位"></el-table-column>
          <el-table-column prop="number" label="数量"></el-table-column>
          <el-table-column prop="unitPrice" label="单价（万元）"></el-table-column>
          <el-table-column prop="monthPrice" label="合价（万元）">
            <template #default="{ row }">
              <div class="tc" v-if="row.isChild">
                {{ allPrice(row) }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="备注"></el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>

    <el-divider></el-divider>
    <div class="flex flex-between align-center tabs" v-if="out == 0">
      <div class="dialog-footer">
        <el-form :rules="rulesComment" ref="ruleFormsRef" :model="ruleForms">
          <el-form-item label="审批意见" prop="comment">
            <el-input :rows="2" type="textarea" placeholder="审批意见" v-model="ruleForm.comment" style="width: 600px"
              clearable />
          </el-form-item>
        </el-form>
      </div>
      <div style="margin-top:20px">
        <el-button type="primary" class="mr10 ml10" @click="changeRefuse">驳回</el-button>
        <el-button type="primary" @click="pass">通过</el-button>
      </div>
    </div>

  </div>
</template>
<script lang="ts">
import flowChart from "@/components/PublicProcess/Chart/flowChart.vue";

import * as proxy from "@/constants/proxy";
import request from "@/utils/request";
import PopupTreeInput from "@/views/science/components/PopupTreeInput/index.vue";
import { Modals, tips } from "@/views/science/components/tips/tips";
import { ElMessage, ElMessageBox } from "element-plus";
import { onMounted, reactive, ref } from "vue";
import {
allowProcess,
databasedList,
databaseddelete,
databasedinsert,
getAccountType,
getDigitalExport,
getTotalList,
refuseProcess,
startProcess,
} from "../../api/research";
import Table from "../../components/table/table.vue";
export default {
  props: {
    params: {
      type: Object,
      default: {},
    },
    out: {
      type: String,
      default: '0',
    }


  },
  components: {
    Table,
    PopupTreeInput,
    flowChart,
  },
  setup(props) {
    const ruleFormsRef = ref();

    const ruleForms = reactive({
      comment: "",
    });

    const rulesComment = reactive({
      comment: [{ required: true, message: "请输入审核意见", trigger: "change" }],
    });
    let allUnitPrice = ref();
    const activeName = ref("first");
    let data = reactive({
      businessKey: "",
      currTaskTd: "",
      processInstanceId: "",
      tabId: "1",
      times: 0,
      dealVisible: false,
      dialogVisible: false,
      popupTreeProps: {
        label: "name",
        children: "children",
        value: "id",
        checkStrictly: true,
      },
    });
    // 列表
    let allTableData = ref([]);
    let loading = ref(true);
    const page = {
      page: 1,
      pageSize: 10,
      total: 0,
    };

    interface Config {
      id: string;
    }

    let selectArr: Config[] = reactive([]);
    const handleSelectionChange = (val) => {
      selectArr = val;
      console.log(val, selectArr);
    };
    // 批量删除
    const deleteTableItem = () => {
      ElMessageBox.confirm("确定要删除选中数据吗?", "提示", {
        type: "warning",
      })
        .then(() => {
          loading.value = true;
          if (selectArr.length !== 0) {
            const delSelect = selectArr.map((el) => {
              return {
                affiliatedInstitution: el["单位id"],
                budgetYear: el["年份"],
              };
            });
            databaseddelete(delSelect).then((res) => {
              if (res.data.code == 200) ElMessage.success("删除成功");
              getListData();
            });
          } else {
            ElMessage({
              message: "请选择数据后删除！",
              type: "warning",
            });
          }
        })
        .catch(() => {
          ElMessage({
            message: "取消了删除！",
            type: "warning",
          });
          getListData();
          console.log("点击了取消");
        });
    };

    const affiliatedInstitutionSearch = ref([]);
    const budgetYear = ref("");
    interface Config1 {
      belongingUnit: string;
    }
    const deptForm = {
      parentId: 0,
      parentName: "",
    };
    let options = ref([]);

    let getListData = () => {
      selectArr = [];
      loading.value = true;
      getTotalList({
        current: page.page,
        size: page.pageSize,
        affiliatedInstitution: affiliatedInstitutionSearch.value
          ? affiliatedInstitutionSearch.value[
          affiliatedInstitutionSearch.value.length - 1
          ]
          : "",
        budgetYear: budgetYear.value,
      })
        .then((res) => {
          let resData = res.data.data;
          resData.records.forEach((e) => {
            console.log(e.status);

            if (e.status == 0) {
              e.status = "待提交";
            }
            if (e.status == 1) {
              e.status = "办理中";
            }
            if (e.status == 2) {
              e.status = "正常办结";
            }
            if (e.status == 3) {
              e.status = "已退回";
            }
            if (e.status == 4) {
              e.status = "已撤办";
            }
            if (e.status == 5) {
              e.status = "强制办结";
            }
            if (e.status == 6) {
              e.status = "已废弃";
            }
            if (e.status == 7) {
              e.status = "已挂起";
            }
            if (e.status == 8) {
              e.status = "已驳回";
            }
          });
          allTableData.value = resData.records;
          /* allTableData.value = resData.records */
          page.total = resData.total;

          console.log(allTableData, page, "++", res);
        })
        .finally(() => {
          loading.value = false;
          console.log();
        });
    };
    let downList = [{ belongingUnit: "" }];

    const getOrgList = () => {
      return request({
        url: proxy.CHECC_API_CMS + "/org/getSysOrgList",
        method: "get",
      }).then((res) => {
        options.value = res.data.data;
      });
    };
    let columns = [
      {
        key: "单位",
        label: "单位",
      },
      {
        key: "年份",
        label: "年份",
      },
      {
        key: "软件外包开发费",
        label: "软件外包开发费",
      },
      {
        key: "软件购置费",
        label: "软件购置费",
      },
      {
        key: "软件维护费",
        label: "软件维护费",
      },
      {
        key: "计算机设备维护费",
        label: "计算机设备维护费",
      },
      {
        key: "计算机耗材费",
        label: "计算机耗材费",
      },
      {
        key: "系统集成维护费",
        label: "系统集成维护费",
      },
      {
        key: "互联网使用费",
        label: "互联网使用费",
      },
      {
        key: "status",
        label: "状态",
      },
    ];
    const yearlist1 = [
      {
        value: "",
        name: "全部",
      },
      {
        value: "2020",
        name: "2020",
      },
      {
        value: "2021",
        name: "2021",
      },

      {
        value: "2022",
        name: "2022",
      },
      {
        value: "2023",
        name: "2023",
      },
      {
        value: "2024",
        name: "2024",
      },
      {
        value: "2025",
        name: "2025",
      },
    ];

    const yearlist = [
      {
        value: "2020",
        name: "2020",
      },
      {
        value: "2021",
        name: "2021",
      },

      {
        value: "2022",
        name: "2022",
      },
      {
        value: "2023",
        name: "2023",
      },
      {
        value: "2024",
        name: "2024",
      },
      {
        value: "2025",
        name: "2025",
      },
    ];

    // 驳回
    let changeRefuse = () => {
      ruleFormsRef.value.validate((valid) => {
        if (valid) {
          Modals("是否驳回本次内容", "提示", "warning").then(async () => {
            refuseProcess({
              procInsId: props.params.procInsId,
              comment: ruleForms.comment,
              businessKey: data.businessKey,
              businessType: "YW17",
              random: new Date().valueOf(),
            }).then((res) => {

              if (res.data.code == 200) {

                tips('驳回成功', 'success')

              } else {

                tips(res.data.message, "warning");

              }

            });
          });
        }
      });
    };

    let getExportBtn = () => {
      Modals("是否导出全部数据", "提示", "warning")
        .then(async () => {
          await getDigitalExport(
            {
              affiliatedInstitution:
                affiliatedInstitutionSearch.value[
                affiliatedInstitutionSearch.value.length - 1
                ],
              budgetYear: budgetYear.value,
              ids: selectArr.map((el) => {
                return el.id;
              }),
            },
            "数字化经费预算"
          );
        })
        .catch(() => {
          console.log("点击了取消");
        });
    };

    let changePage = (current) => {
      page.page = current;
      getListData();
    };

    // 新增
    let baseTableData: any = [];
    let baseId = 0; //区别每一行
    getAccountType().then((res) => {
      baseTableData = res.data.data || [];
    });
    // 编辑
    let currentRow = {};
    const handleEdit = (row) => {
      currentRow = row;
      ruleForm.affiliatedInstitution = currentRow["单位"];
      ruleForm.budgetYear = currentRow["年份"];
      ruleForm.id = currentRow["id"];
      getDetail(row);
      data.dialogVisible = true;
    };
    const getDetail = (row) => {
      databasedList({
        id: row["id"],
      }).then((res) => {
        let resData = res.data.data;

        data.processInstanceId = res.data.data[0].processInstanceId;

        openTableData.arr = JSON.parse(JSON.stringify(baseTableData)).map((el) => {
          el.children = [];
          el.baseId = ++baseId;
          let i = 0;
          resData.forEach((item) => {
            if (el.accountNumber === item.accountNumber) {
              i++;
              el.children.push({
                accountNumber: i,
                accountType: item.accountName,
                accountName: item.accountName,
                unitPrice: item.unitPrice,
                accountUnit: item.accountUnit,
                number: item.number,
                remark: item.remark,
                isChild: true,
                baseId: ++baseId,
              });
            }
          });
          return el;
        });
      });
    };
    const rules = reactive({
      affiliatedInstitution: [
        {
          required: true,
          message: "请选择",
          trigger: "change",
        },
      ],
      budgetYear: [
        {
          required: true,
          message: "请选择",
          trigger: "change",
        },
      ],
    });
    const ruleForm = reactive({
      affiliatedInstitution: "",
      affiliatedInstitutionName: "",
      budgetYear: "2023",
      id: "",
    });
    const changeSelectValue = (value) => {
      ruleForm.id = value.id;
      ruleForm.affiliatedInstitution = value.id;
      ruleForm.affiliatedInstitutionName = value.name;
      console.log("ruleForm", ruleForm);
    };

    let openTableData = reactive({
      arr: [
        {
          accountNumber: "",
          accountType: "",
          children: [
            {
              accountNumber: "",
              accountType: "",
              accountName: "",
              unitPrice: "",
              accountUnit: "",
              number: "",
              remark: "",
              baseId: "",
            },
          ],
        },
      ],
    });

    let params = {
      page: 1,
      limit: 10,
      title: "",
      number: null,
      accountType: null,
      accountUnit: null,
      remark: null,
    };
    for (const i in params) {
      if (params[i] === null || params[i] === "" || params[i] === undefined) {
        delete params[i];
      }
    }

    const add = () => {
      data.dialogVisible = true;
      openTableData.arr = JSON.parse(JSON.stringify(baseTableData)).map((el) => {
        el.children = [
          {
            accountNumber: 1,
            accountType: "",
            accountName: "",
            unitPrice: "",
            accountUnit: "",
            number: "",
            remark: "",
            isChild: true,
            baseId: ++baseId,
          },
        ];
        return el;
      });
    };
    const ruleFormRef = ref();
    const addChildItem = (row) => {
      let accountNumber = row.children.length + 1;
      row.children.push({
        accountNumber,
        accountName: "",
        accountType: "",
        unitPrice: "",
        accountUnit: "",
        number: "",
        remark: "",
        isChild: true,
        baseId: ++baseId,
      });
      console.log(openTableData.arr);
    };
    const submit = () => {
      if (!ruleForm.affiliatedInstitution) {
        ElMessage({
          message: "请选择单位!",
          type: "warning",
        });
        return;
      }

      let arr: any = [];
      openTableData.arr.forEach((el) => {
        el.children.forEach((item) => {
          arr.push({
            affiliatedInstitution: ruleForm.id,
            budgetYear: ruleForm.budgetYear,
            accountNumber: el.accountNumber,
            accountType: el.accountType,
            accountName: item.accountType,
            unitPrice: item.unitPrice,
            accountUnit: item.accountUnit,
            number: item.number,
            remark: item.remark,
          });
        });
      });
      arr.forEach((item) => {
        for (const i in item) {
          if (item[i] === null || item[i] === "" || item[i] === undefined) {
            delete item[i];
          }
        }
      });
      arr = arr.filter((item) => {
        return (
          item.accountName != undefined &&
          item.accountUnit != undefined &&
          item.number != undefined &&
          item.unitPrice != undefined
        );
      });
      if (arr == undefined || arr.length <= 0) {
        ElMessage({
          message: "信息填写不完整!",
          type: "warning",
        });
        return;
      }
      databasedinsert(arr).then((res) => {
        data.dialogVisible = false;
        getListData();
        ElMessage.success("操作成功");
      });
    };

    let submitEvent = (row) => {
      Modals("是否确认当前流程", "提示", "warning")
        .then(async () => {
          let res = await startProcess({
            flowKey: "budget-digital",
            businessKey: row.id,
            businessType: "YW17",
            random: new Date().valueOf(),
          });

          if (res.data.code == 200) {
            data.dealVisible = true;

            deal(row.id, 1);
          } else {
            tips(res.data.message, "warning");
          }
        })
        .catch(() => { });
    };


    let deal = (id, state) => {
      data.times = setInterval(async () => {
        databasedList({
          id: id,
        }).then((res) => {
          let resData = res.data.data;

          if (resData[0].status == state) {
            data.dealVisible = false;

            getListData();

            clearTimeout(data.times);
          }
        });
      }, 1000);
    };

    // 审核
    let monthVisible = reactive({ isShow: true });
    const toExamine = (row) => {
      getDetail(row);
      monthVisible.isShow = true;
    };
    const pass = () => {
      ruleFormsRef.value.validate((valid) => {
        if (valid) {
          Modals("是否通过本次内容", "提示", "warning")
            .then(async () => {
              allowProcess({
                procInsId: props.params.procInsId,
                comment: ruleForms.comment,
                businessKey: props.params.businessKey,
                businessType: "YW17",
                random: new Date().valueOf(),
              }).then((res) => {
                if (res.data.code == 200) {

                  tips('审核成功', 'success')

                } else {

                  tips(res.data.message, "warning");

                }

              });
            })
            .catch(() => {
              console.log("点击了取消");
            });
        }
      });

      let dealCheck = (id) => {
        data.times = setInterval(() => {
          databasedList({
            id: id,
          }).then((res) => {
            let resData = res.data.data;
            if (
              (resData[0].status == 1 && resData[0].currTaskTd != data.currTaskTd) ||
              resData[0].status == 2
            ) {
              data.dealVisible = false;
              ruleFormsRef.value.resetFields();
              getListData();
              clearTimeout(data.times);
            }
          });
        }, 1000);
      };

    };
    const guanbi = () => {
      monthVisible.isShow = false;
      ruleForm.affiliatedInstitution = "";
      ruleForms.comment = "";
      ruleFormsRef.value.resetFields();
    };

    const cancelItem = (row) => {
      console.log(row);
      openTableData.arr.forEach((el) => {
        el.children.forEach((item, k) => {
          if (item.baseId == row.baseId) {
            el.children.splice(k, 1);
          }
        });
      });
    };
    const canDelete = (row) => {
      let iscan = true;
      openTableData.arr.forEach((el) => {
        el.children.forEach((item, k) => {
          if (item.baseId == row.baseId) {
            iscan = el.children.length > 1 ? true : false;
          }
        });
      });
      return iscan;
    };

    // 审核
    let suggest = ref("");

    onMounted(() => {
      getOrgList();
      getListData();

      toExamine({ id: props.params.businessKey });
    });
    return {
      // allUnitPrice,
      activeName,
      options,
      data,
      deptForm,
      allTableData,
      yearlist,
      page,
      columns,
      handleEdit,
      changeSelectValue,
      // 新增
      add,
      submit,
      pass,
      ruleForm,
      rules,
      ruleFormRef,
      handleSelectionChange,
      budgetYear,
      monthVisible,
      addChildItem,
      openTableData,
      cancelItem,
      deleteTableItem,
      getListData,
      affiliatedInstitutionSearch,
      suggest,
      submitEvent,
      toExamine,
      canDelete,
      guanbi,
      yearlist1,
      getExportBtn,
      deal,
      changePage,
      ruleForms,
      ruleFormsRef,
      rulesComment,
      changeRefuse,
    };
  },
  computed: {
    allPrice() {
      return (row) => {
        if (row && row.isChild) {
          // 在这里进行计算
          return row.number * row.unitPrice;
        } else {
          return ""; // 或者返回其他默认值
        }
      };
    },
    allUnitPrice() {
      return (array) => {
        let sum = 0;
        array.forEach((item) => {
          item.children.map((i) => {
            sum += i.number * i.unitPrice;
          });
        });
        return sum;
      };
    },
  },
  methods: {
    setClass(val) {
      let { row, rowIndex, columnIndex } = val;
      if (row.id && [0, 1].includes(columnIndex)) return "bc-caf982";
      return "";
    },
  },
};
</script>
<style lang="scss">
.conUnitName {
  display: inline-block;
  width: 200px;
  margin-right: 15px;
}

.gy-cascader {
  .el-cascader-node {
    max-width: 250px;
  }
}
</style>
<style lang="scss" scoped>
.dialog {
  padding: 10px;
}

/deep/ .bc-caf982 {
  background-color: #caf982;
}

.container {
  background-color: white;
  padding: 20px;
}

.el-col {
  // line-height: 40px;
}

.el-form-item {
  .el-input {
    width: 100px;
    background-color: aliceblue;
  }

  .el-select {
    width: 100px;
  }
}

.custom-color {
  color: red !important;
  /* 确保优先级高于其他样式 */
}

.el-table th {
  background-color: #f0f0f0;
  /* 修改表头背景色 */
  color: #333;
  /* 修改表头文字颜色 */
}

.flex {
  display: flex;
}

.head {
  display: flex;
}

.open-title {
  font-size: 20px;
  font-weight: 700;
  text-align: center;
}

/deep/ .el-dialog__body {
  display: block !important;
}

/deep/ .el-dialog__title {
  padding: 15px 15px 0 15px;
  margin-top: 20px;
  display: block !important;
}

.mb10 {
  margin-bottom: 10px;
}

.mr10 {
  margin-right: 10px;
}

.ml10 {
  margin-left: 10px;
}

.flex {
  display: flex;
}

.flex-between {
  justify-content: space-between;
}

.align-center {
  align-items: center;
}

/deep/.el-dialog {
  margin-top: none !important;
  position: absolute;
  top: -15vh;
  height: 100vh;
}

.tabs {
  margin-top: 20px;
}

/deep/ .el-dialog__header {
  padding: 0;
}

.mb40 {
  margin-bottom: 40px;
}

.head-box {
  padding-bottom: 5px;
  border-bottom: 1px solid #eee;
}

.f32 {
  font-size: 32px;
}

.f24 {
  font-size: 24px;
}

.c-f33 {
  color: #333;
}

.fw700 {
  font-weight: 700;
}

.tc {
  text-align: center;
}

.rel {
  position: relative;
}

.second-title {
  position: absolute;
  right: 0;
  top: 0;
}

.flex1 {
  flex: 1;
}

.mt10 {
  margin-top: 10px;
}

.mt15 {
  margin-top: 15px;
}

.mb10 {
  margin-bottom: 10px;
}

/deep/ .el-icon-arrow-right {
  display: none;
}

/deep/ .el-table__placeholder {
  width: 0 !important;
}

/deep/ .el-table__indent {
  padding: 0 !important;
}

/deep/ .shh-box .el-table td {
  padding: 0 !important;
}

.el-dialog__body {
  padding: calc(var(--el-dialog-padding-primary) + 1px) (var(--el-dialog-padding-primary) + 1px) !important;
  /* color: var(--el-text-color-regular); */
  /* font-size: var(--el-dialog-content-font-size); */
  word-break: break-all;
}

.element.style {
  margin-top: 2vh !important;
  width: 80%;
}
</style>
